<!-- 入库安排 -->
<template>
    <div class="delivery-selectWarehouse">
        <div v-if="loading" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);">
            <van-loading type="spinner" />
        </div>
        <div v-else class="list">
            <div :class="['item', activeIndex == index ? 'active' : '']" v-for="(item, index) in warehouse.list"
                :key="item.spckid" @click="clickStore(index)">{{ item.spckmc }}
            </div>
        </div>
        <div v-if="!loading" class="btn" @click="save">保存</div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { Ref } from 'vue'
import router from '@/router'
import { msgError } from '@/utils/message'
import { storageZdspckGetWarehouse } from '@/api/deliveryManage'
import { setLocalStorage,getLocalStorage } from "@/utils/localStorage";

let activeIndex: Ref<Number | undefined> = ref()

const carInfo = getLocalStorage('warehouseInArrangeInfo');
let info: any = reactive({
    id: carInfo.id || '',
    spckid: carInfo.spckid || '',
    spckmc: carInfo.spckmc || '',
    ssrqid: carInfo.ssrqid || '',
    dzbz: carInfo.dzbz || ''
})
let loading: Ref<boolean> = ref(false)
let warehouse: any = reactive({
    list: []
})

onMounted(() => {
    getStoreInfo();
})
async function getStoreInfo() {
    await getStoreList();
    getActiveIndex();
}

function getActiveIndex() {
    activeIndex.value = warehouse.list.findIndex((item: any) => item.spckid == info.spckid);
}

function clickStore(i: number) {
    activeIndex.value = i;
    const item = warehouse.list[i];
    info.spckid = item.spckid;
    info.spckmc = item.spckmc;
}

function getStoreList() {
    loading.value = true;
    storageZdspckGetWarehouse().then((res: any) => {
        warehouse.list = res.data || [];
        loading.value = false;
    })
}
function save() {
    if (!info.spckid) return msgError('请选择仓库！');
    setLocalStorage('warehouseInArrangeInfo', info);
    goBack();
}
function goBack() {
    router.go(-1);
}
</script>
<style lang="scss" scoped>
div,
span {
    box-sizing: border-box;
}

.delivery-selectWarehouse {
    padding: 32px;
    width: 100%;
    background-color: #FFFFFF;
    min-height: 100vh;

    .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
            margin-bottom: 32px;
            width: 328px;
            height: 72px;
            line-height: 72px;
            text-align: center;
            background: #F4F6F9;
            border-radius: 16px;
            font-size: 28px;
        }

        .active {
            background: rgba(35, 134, 227, 0.1);
            color: #2386E3;
            border: 2px solid #2386E3;
        }
    }


    .btn {
        width: 700px;
        height: 96px;
        line-height: 96px;
        text-align: center;
        border-radius: 24px;
        color: #FFFFFF;
        background: #2386E3;
        position: fixed;
        bottom: 30px;
    }
}
</style>
